<!-- 搜索表单 -->
<template>
  <div>

    <el-form label-width="77px"
             class="ele-form-search"
             @keyup.enter.native="search"
             @submit.native.prevent>

      <el-row :gutter="15">
        <el-col :span="24">
          <h5 class="navList">进件列表</h5>
        </el-col>

      </el-row>
      <el-row :gutter="15">

        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="商家名称:">
            <el-input clearable
                      v-model="where.oemCode"
                      placeholder="请输商家名称" />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="所属代理:">
            <el-input clearable
                      v-model="where.oemCode"
                      placeholder="请输入所属代理名称" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="进件状态:">
            <el-select clearable
                       v-model="where.agencyId"
                       placeholder="请选择进件状态"
                       class="ele-fluid">
              <el-option v-for="(i,j) in typeList"
                         :key="j"
                         :label="i.agencyName"
                         :value="i.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="申请时间:">
            <el-date-picker v-model="dateRange"
                            type="datetimerange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            class="ele-fluid" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="审核时间:">
            <el-date-picker v-model="dateRange"
                            type="datetimerange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            class="ele-fluid" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="进件类型:">
            <el-select clearable
                       v-model="where.status"
                       placeholder="请选择"
                       class="ele-fluid">
              <el-option label="启用"
                         :value="1" />
              <el-option label="冻结"
                         :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <div class="ele-form-actions">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ele-btn-icon"
                       @click="search">
              查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    // 默认表单数据
    const defaultWhere = {
      oemType: 1,
      username: '',
      nickname: '',
      deleted: '0',
      sex: undefined
    };
    return {
      dateRange: [],
      // 表单数据
      where: { ...defaultWhere }
    };
  },
  props: {
    typeList: Array
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    /* 搜索 */
    search () {
      if (!this.dateRange) {
        delete this.where.startTime
        delete this.where.endTime
      }
      if (!this.where.oemCode) {
        delete this.where.oemCode
      }
      if (!this.where.linkman) {
        delete this.where.linkman
      }

      if (this.dateRange) {
        this.where.startTime = this.dateRange[0]
        this.where.endTime = this.dateRange[1]
      }
      // 手机号验证
      //   if (this.where.phone && this.$sun.checkModbile(this.where.phone) == false) {
      //     this.$message.error('手机号码格式不正确！');
      //     return
      //   }
      //   this.$emit('search', this.where);
    },
    /*  重置 */
    reset () {
      this.where = { ...this.defaultWhere };
      this.dateRange = []
      delete this.where.startTime
      delete this.where.endTime
      this.$emit('search', this.where);
    }
  }
};
</script>
<style lang="less" scoped>
.navList {
  margin-bottom: 25px;
  font-weight: 700;
}
</style>
